<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en" class="page-fill">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="keywords" content="userLogin">
    <meta name="description" content="智慧医疗平台用户登录">
    <link rel="shortcut icon" href="../images/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="../css/oksub.css"/>
        <style>
        #weather-float-he {
            position: fixed !important;
            z-index: 99999 !important;
            left: 0 !important;
            top: 0 !important;
            transform: scale(.9);
        }

        #weather-float-he div[data-v-0a6ec0b4] {
            box-shadow: none !important;
            top: 42px !important;
        }

        #weather-float-he div[data-v-0a6ec0b4] div {
            position: static !important;
        }

        body, html {
            margin: 0;
            width: 100%;
            height: max-content;
        }
    </style>
</head>
<body class="page-fill">
    <div class="page-fill" id="login">
        <form class="layui-form" id="loginForm">
            <div class="login_face"><img src="../images/logo.png"></div>
            <input type="hidden" name="op" value="userLogin">
            <script type="text/javascript">
			    WIDGET = {
			        FID: 'FS17XUsOiV'
			    }
			</script>
			<script type="text/javascript" src="https://apip.weatherdt.com/float/static/js/r.js?v=1111"></script>
            <div id="loginMessage">
	            <div class="layui-form-item input-item">
	                <label for="username">用户名</label>
	                <input type="hidden" name="loginType" value="userName">
	                <input type="text" lay-verify="required" name="loginName" placeholder="请输入账号" autocomplete="off" id="userName" class="layui-input">
	            </div>
	            <div class="layui-form-item input-item">
	                <label for="password">密码</label>
	                <input type="password" lay-verify="required|password" name="password" placeholder="请输入密码" autocomplete="off" id="password" class="layui-input">
	            </div>
            </div>
            <div class="layui-form-item input-item captcha-box">
                <label for="captcha">验证码</label>
                <input type="text" lay-verify="required|captcha" name="captcha" placeholder="请输入验证码" autocomplete="off" id="captcha" maxlength="4" class="layui-input" style="width:150px;">
                <div class="img ok-none-select" id="captchaImg"></div>
            </div>
            <div class="layui-form-item">
                <button class="layui-btn layui-block" lay-filter="login" lay-submit="">登录</button>
            </div>
            <div class="login-link">
                <a href="userRegister.jsp">注册</a>
                <a href="userForget.jsp">忘记密码?</a>
                <span id="login-link-span"><a id="turnPhone">手机登录</a></span>
            </div>
        </form>
    </div>
    <!--js逻辑-->
    <script src="../lib/layui/layui.js"></script>
    <script>
    var  user="${param.msg}";
     if(user=="error"){
    	 alert("请先登录！");
    	 location.href="userLogin.jsp";
     }
        layui.use(["form", "okGVerify", "okUtils", "okLayer"], function () {
            let form = layui.form;
            let $ = layui.jquery;
            let okGVerify = layui.okGVerify;
            let okUtils = layui.okUtils;
            let okLayer = layui.okLayer;
            let regPhone = /^[1][0-9]{10}$/;
            /**手机号验证**/
            let setInter = '';
            /**定时器对象*/
            let second = 60;//设置时间
            
            /**
             * 初始化验证码
             */
            let verifyCode = new okGVerify("#captchaImg");

            /**
             * 数据校验
             */
            form.verify({
                password: [/^[\S]{6,12}$/, "密码必须6到12位，且不能出现空格"],
                captcha: function (val) {
                    if (verifyCode.validate(val) != "true") {
                        return verifyCode.validate(val)
                    }
                }
            });

            /**
             * 表单提交登录
             */
            form.on("submit(login)", function (data) {
            	var formData = $("#loginForm").serialize();
            	console.log(formData);
            	// 表单提交
            	$.ajax({
      	    		 async:true,
      	    		 type:"post",
      	    		 url:"${pageContext.request.contextPath}/user",
      	    		 data:formData,
      	    		 success:function(result){
      	    			 console.log("result:"+result);
      	    			 if("\"fail\""==result){
	      	    			alert("账号或密码错误!请重新输入");
	      	    			window.location = "./userLogin.jsp";
      	    			 }else{
      	    				 window.location = "../../front/index.jsp";
      	    			 } 
      	    		 },
      	    		 error:function(){
      	    			 alert("异步请求失败!");
      	    		 }
           	});
                return false;
            });

            /**
             * 表单input组件单击时
             */
            $(document).on("click","#login .input-item .layui-input",function (e) {
                e.stopPropagation();
                $(this).addClass("layui-input-focus").find(".layui-input").focus();
            });

            /**
             * 表单input组件获取焦点时
             */
            $(document).on("focus","#login .layui-form-item .layui-input",function () {
                $(this).parent().addClass("layui-input-focus");
            });

            /**
             * 表单input组件失去焦点时
             */
            $(document).on("blur","#login .layui-form-item .layui-input",function () {
                $(this).parent().removeClass("layui-input-focus");
                if ($(this).val() != "") {
                    $(this).parent().addClass("layui-input-active");
                } else {
                    $(this).parent().removeClass("layui-input-active");
                }
            });
            
            /**
             * 点击获取验证码
             */
            $(document).on("click",".btn-auth-code",function () {
                let that = $(this),
                    phone = $("#phone").val();
                if ($(this).hasClass("layui-btn-disabled")) {
                    return;
                }
                if (regPhone.test(phone)) {
                	// 异步请求验证手机验证码
                	$.ajax({
           	    		 async:true,
           	    		 type:"post",
           	    		 url:"${pageContext.request.contextPath}/user",
           	    		 data:{
           	    			 op:"checkCode",
           	    			 phone:phone
           	    		 },
           	    		 success:function(result){
           	    			 getCode(result);
           	    		 },
           	    		 error:function(){
           	    			 alert("异步请求失败!");
           	    		 }
                	});
                    if (!setInter) {
                        clearInterval(setInter);
                        that.addClass("layui-btn-disabled");
                        that.text(second + "秒后获取");
                        setInter = setInterval(function () {
                            second--;
                            if (second < 1) {
                                clearInterval(setInter);
                                that.removeClass("layui-btn-disabled");
                                that.text("重新获取");
                                setInter = "";
                                second = 60;
                            } else {
                                that.text(second + "秒后获取");
                            }
                        }, 1000);
                    }
                } else {
                    layer.msg("输入的手机号格式不正确，请重新输入", {
                        icon: "5",
                        anim: "6",
                    });
                    $("#phone").focus();
                }
            });
	        
	        /**
	         * 点击切换手机号登录
	         */
	        $(document).on("click","#turnPhone",function(){
	        	content = "<div class=\"layui-form-item input-item\">"+
	        			  "  <label for=\"phone\">手机号</label>"+
				          "  <input type=\"hidden\" name=\"loginType\" value=\"userTel\">"+
				          "  <input type=\"text\" lay-verify=\"required|phone\" name=\"loginName\" placeholder=\"请输入手机号\" autocomplete=\"off\" id=\"phone\" maxlength=\"11\" class=\"layui-input\">"+
				          "</div>"+
				          "<div class=\"layui-form-item input-item code-box\">"+
			              "  <label for=\"authCode\">手机验证码</label>"+
			              "  <input type=\"text\" lay-verify=\"required\" name=\"captcha\" placeholder=\"\" id=\"authCode\" autocomplete=\"off\" maxlength=\"8\" class=\"layui-input\" style=\"width:110px;\" >"+
			              "  <button type=\"button\" style=\"margin-left: 125px; margin-top: -55px;\" class=\"layui-btn btn-auth-code\" id=\"getCode\">获取手机验证码</button>"+
			              "</div>";
				$("#loginMessage").html(content);
				content1 = "<a id=\"turnName\">用户名登录</a>"; 
				$("#login-link-span").html(content1);
	        });
	        
	        /**
	         * 点击切换用户名登录
	         */
	         $(document).on("click","#turnName",function(){
	        	content = "<div class=\"layui-form-item input-item\">"+
	        			  "  <label for=\"userName\">用户名</label>"+
				          "  <input type=\"hidden\" name=\"loginType\" value=\"userName\">"+
				          "  <input type=\"text\" lay-verify=\"required\" name=\"loginName\" placeholder=\"请输入用户名\" autocomplete=\"off\" id=\"userName\" class=\"layui-input\">"+
				          "</div>"+
				          "<div class=\"layui-form-item input-item\">"+
			              "  <label for=\"password\">密码</label>"+
			              "  <input type=\"password\" lay-verify=\"required|password\" name=\"password\" placeholder=\"请输入密码\" autocomplete=\"off\" id=\"password\" class=\"layui-input\">"+
			              "</div>";
				$("#loginMessage").html(content);
				content1 = "<a id=\"turnPhone\">手机号登录</a>"; 
				$("#login-link-span").html(content1);
	        });
        });
        
        var phonemsg = 0;
        function getCode(result){
        	phonemsg = result;
        }
    </script>
</body>
</html>
